parabola
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .parent {
        width: 200px;
        height: 200px;
        /* background-color: lightblue; */
        /* 父元素Y轴的位移过渡效果是一个贝塞尔曲线 */
        transition: transform 1s cubic-bezier(0.48, -0.35, 0.78, 0.45); 
        margin: 50px auto;
      }

      .child {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
        /* 子元素X轴的位移过渡效果是一个线性的 */
        transition: transform 1s linear;
        border-radius: 50%;
      }

      .parent:hover {
        transform: translateY(300px); /* 在Y轴方向上位移 */
      }
      .parent:hover .child {
        transform: translateX(-200px);
      }
    </style>
  </head>
  <body>
    <!-- 
       制作一个抛物线需要父子元素都设置位移
       父元素控制Y轴方向，子元素控制X方向
       父元素的过渡效果是一个贝塞尔曲线，子元素的过渡效果是一个线性
       父元素在Y轴(垂直)方向移动是一个贝塞尔曲线，子元素在X轴线性移动以与父元素的位移协调，即可实现一个抛物线
     -->
    <div class="parent">
      <div class="child">子元素</div>
    </div>
  </body>
</html>
